<template>
  <div class="main-detail" style="justify-content: center">
    <div class="left top" style="width:930px">
      <el-card>
        <div class="tab">
          <el-menu
             router
            :default-active="$route.path"
            class="el-menu-demo"
            mode="horizontal"
          >
             <el-menu-item
                v-for="(item, index) in navList"
                :key="index"
                :index="item.name"
              >
                {{ item.navItem }}
              </el-menu-item>
          </el-menu>
          <div class="line"></div>
        </div>
        <!-- 正文 -->
        <test-pro v-show="$route.meta.title=='a'" />
        <test-condition v-show="$route.meta.title=='b'"/>
        <test-method v-if="$route.path=='/home/method'"/>
        <test-tip v-if="$route.path=='/home/tip'"/>
        <test-goods v-if="$route.path=='/home/goods'"/>
        <test-result v-if="$route.path=='/home/result'"/>
        <test-show v-if="$route.path=='/home/show'"/>


      </el-card>
    </div>
    <div class="right top">
      <el-card style="width: 250px">
        <h4 class="line1">教学支持热线</h4>
        <i class="el-icon-phone"><span style="font-size:14px" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;13586579773</span></i><br />
        <i class="iconfont icon-QQ"><span style="font-size:14px" >QQ群：&nbsp;&nbsp;791571316</span></i>
      </el-card>
      <el-card class="top" style="width: 250px">
        <div class="team">
          <h4 class="line1">团队教师</h4>
          <a class="team-teach">教学情况</a>
        </div>
        <i class="el-icon-user-solid"><span style="font-size:14px" >孔素然 宁波财经学院</span></i>
        <i class="el-icon-user-solid"><span style="font-size:14px" >殷均平 宁波财经学院</span> </i>
        <i class="el-icon-user-solid"><span style="font-size:14px" >张磊 &nbsp;&nbsp;宁波财经学院</span> </i>
      </el-card>
     <visit-data></visit-data>
      <el-card style="width: 250px" class="top">
        <div class="testScore">
          <h4 class="line1">实验评分</h4>
          <a class="score">62人评分</a>
        </div>
        <div class="rate">
          <div class="left">
            <span>4.8</span>
          </div>
          <div class="right">
            <el-rate v-model="value" show-score :colors="colors"> </el-rate>
            <span class="unLine">实验内容</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import VisitData from "@/components/visit-data/visit-data.vue";
import TestPro from '../test-pro/test-pro.vue'
import TestCondition  from '../test-condition/test-condition.vue'
import TestMethod from '../test-method/test-method.vue'
import TestTip from '../test-tip/test-tip.vue'
import TestGoods from '../test-goods/test-goods.vue'
import TestResult from '../test-result/test-result.vue'
import TestShow from '../test-show/test-show.vue'
export default {
  components:{
    TestPro,TestCondition,TestMethod,TestTip,TestGoods,TestResult,TestShow,VisitData

  },
    data(){
    return{
      value:4.8,
      activeIndex:'1',
      showMain:false,
      navList: [
        { name: "/home/pro", navItem: "实验项目简介" },
        { name: "/home/condition", navItem: "实验条件" },
        { name: "/home/method", navItem: "实验教学方法" },
        { name: "/home/tip", navItem: "实验操作指导" },
        { name: "/home/goods", navItem: "实验项目特色" },
        { name: "/home/result", navItem: "实验结果与结论" },
        { name: "/home/show", navItem: "实验成果展示" },
      ],
    }
  },
};
</script>

<style lang="less" scoped>
.main-detail {
  background: #f4f4f4;
  padding: 0 100px;
  display: flex;
  //   margin-top: 20px;

  .left {
    margin-right: 20px;
    .line {
      margin-bottom: 15px;
    }
    .el-menu-demo{
      display: flex;
      flex-wrap: nowrap;
    }
  }
  .right {
    .team {
      display: flex;
      position: relative;
      .team-teach {
        position: absolute;
        right: 20px;
        background: #4976e8;
        color: #fff;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 3px;
      }
    }
    .label {
      display: flex;

      .box {
        background-color: #21a6c2;
        width: 28px;
        text-align: center;
        border-radius: 5px;
        color: #fff;
        margin: 0 2px;
      }
      .box2 {
        display: flex;
        position: relative;
        width: 177px;
        padding: 0 10px;
        background-color: #21a6c2;
        color: #fff;
        border-radius: 3px;
        .num {
          position: absolute;
          right: 8px;
        }
      }
    }
    .label2 {
      display: flex;
      .box3 {
        background-color: #a621c2;
        width: 28px;
        text-align: center;
        border-radius: 5px;
        color: #fff;
        margin: 0 2px;
      }
      .box4 {
        display: flex;
        position: relative;
        width: 177px;
        padding: 0 10px;
        background-color: #a621c2;
        color: #fff;
        border-radius: 3px;
        .num {
          position: absolute;
          right: 8px;
        }
      }
    }
    .label3 {
      display: flex;
      .box5 {
        background-color: #4976e8;
        width: 28px;
        text-align: center;
        border-radius: 5px;
        color: #fff;
        margin: 0 2px;
      }
      .box6 {
        display: flex;
        position: relative;
        width: 177px;
        padding: 0 10px;
        background-color: #4976e8;
        color: #fff;
        border-radius: 3px;
        .num {
          position: absolute;
          right: 8px;
        }
      }
    }
    .testScore {
      display: flex;
      position: relative;
      .score {
        position: absolute;
        right: 20px;
        background: #f59a23;
        color: #fff;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 3px;
      }
    }
    .rate{
      display: flex;
    }
  }
}
</style>